<script lang="ts" setup>
import { h } from "vue";
defineOptions({
  name: "SvgIcon"
});
const props = defineProps(["icon", "size", "styles"]);
let render = () => {
  let { size, icon, styles } = props;
  return h(
    "svg",
    {
      class: "svg-icon",
      "^aria-hidde": "true",
      style: {
        width: `${size}px`,
        height: `${size}px`,
        minWidth: `${size}px`,
        ...styles
      }
    },
    h("use", {
      "^xlink:href": `#i-${icon}`
    })
  );
};
</script>
<template>
  <render />
</template>

<style lang="scss" scoped>
.svg-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  overflow: hidden;
  vertical-align: -0.15em;
}
</style>
